<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>建筑物状态变化详情 - 莞城居居民楼A</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <link rel="stylesheet" href="building-detail.css">
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>建筑物状态变化详情</h1>
            <button class="back-btn" id="back-btn">返回地图</button>
        </div>
        
        <div class="building-info">
            <h2 id="building-name">建筑物名称</h2>
            <div class="info-grid">
                <div class="info-item">
                    <div class="info-label">当前状态</div>
                    <div class="info-value">
                        <span id="current-status" class="status-badge">基本完好</span>
                    </div>
                </div>
                <div class="info-item">
                    <div class="info-label">建筑类型</div>
                    <div class="info-value" id="building-type">住宅楼</div>
                </div>
                <div class="info-item">
                    <div class="info-label">损坏程度</div>
                    <div class="info-value" id="damage-level">轻微损坏</div>
                </div>
                <div class="info-item">
                    <div class="info-label">风险等级</div>
                    <div class="info-value" id="risk-level">低风险</div>
                </div>
                <div class="info-item">
                    <div class="info-label">坐标位置</div>
                    <div class="info-value" id="building-coords">103.4921°E, 31.0581°N</div>
                </div>
                <div class="info-item">
                    <div class="info-label">影响面积</div>
                    <div class="info-value" id="impact-area">未知</div>
                </div>
                <div class="info-item">
                    <div class="info-label">建造年份</div>
                    <div class="info-value" id="building-year">未知</div>
                </div>
                <div class="info-item">
                    <div class="info-label">结构类型</div>
                    <div class="info-value" id="structure-type">未知</div>
                </div>
            </div>
        </div>
        
        <div class="timeline-section">
            <h2 class="section-title">状态变化时间线</h2>
            <div class="timeline" id="status-timeline">
                <div class="loading">正在加载时间线数据...</div>
            </div>
        </div>
        
        <div class="chart-container">
            <h2 class="section-title">状态变化趋势</h2>
            <div class="chart-wrapper">
                <canvas id="status-chart"></canvas>
            </div>
        </div>
        
        <div class="damage-photos">
            <h2 class="section-title">损坏情况照片</h2>
            <div class="photos-grid" id="photos-container">
                <div class="photo-placeholder">暂无照片数据</div>
            </div>
        </div>
    </div>

    <script src="building-detail.js"></script>
</body>
</html>